<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="模块分类:" prop="type" @change="onChangeType">
                    <el-radio-group v-model="form.type">
                        <el-radio v-for="(item, index) in type" :key="index" :label="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上级分类:" prop="pid" v-if="form.type === 1">
                    <SelectCategory url="/admin/pz.category/tree" ref="category" placeholder="请选择上级分类"
                                    :check-strictly="true"
                                    :value="selectPid"
                                    @change="onChangeCategory"></SelectCategory>
                </el-form-item>
                <el-form-item label="分类名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入分类名称" clearable />
                </el-form-item>
                <el-form-item label="分类描述:" prop="desc">
                    <el-input v-model="form.desc" placeholder="请输入分类描述" clearable />
                </el-form-item>
                <el-form-item label="排序:" prop="weigh">
                    <el-input-number v-model="form.weigh" :step="1" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import SelectCategory from "@/components/My/SelectCategory";

export default {
    name: 'EditForm',
    components: {SelectCategory},
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                type: [{ required: true, message: "请选择模块分类", trigger: "blur" }],
                name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
                status: [{ required: true, message: "请选择状态", trigger: "blur" }],
            },
            form: {
                type: 1
            },
            // 区域选择配置
            areaOptions: regionData,
            status:[
               { label: "正常", value: 1 },
               { label: "禁用", value: 2 },
            ],
            type:[
                { label: "陪诊分类", value: 1 },
                { label: "取消订单原因", value: 2 },
                { label: "合作方证件", value: 3 },
            ],
            selectPid: []
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        if (!nval.pid) nval.pid = ''
                        this.form = nval
                        this.getParents()
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeType(e) {
            this.form.type = undefined
            let timer = setTimeout(()=>{
                this.form.type = e
                clearTimeout(timer)
            }, 100)
        },
        onChangeCategory(e, pathLabels) {
            e = e || []
            pathLabels = pathLabels || []
            if (e.length >= 3) {
                this.$set(this.form, 'pid', e[2])
            } else if (e.length >= 2) {
                this.$set(this.form, 'pid', e[1])
            } else if (e.length >= 1) {
                this.$set(this.form, 'pid', e[0])
            } else{
                this.$set(this.form, 'pid', undefined)
            }
        },
        getParents() {
            this.request.get("/admin/pz.category/getParents", { params: { id: this.form.id } }).then(response => {
                this.selectPid = response.data.filter(el=>{
                    return el !== this.form.id
                })
                console.log(this.selectPid)
            }).finally(() => {
            })
        }
    }
}
</script>
